import { Button, Select, Table, Tag, notification } from 'antd';
import { useEffect, useState } from 'react';
import { resetPassword } from 'api/user';
import {} from '@ant-design/icons';
import { getApplayList } from 'api/super';
import useGetData from 'hooks/useGetData';
import { useNavigate } from 'react-router-dom';
import { dateFormat } from '@/utils/funcs';
import { number } from 'echarts';

export default function () {
	const { filterInfo, page, viewInfo, setFilterInfo, setPageIndex, setViewInfo }: any = useGetData(
		getApplayList,
		{
			accountState: 0,
		},
		'data'
	);
	const navigate = useNavigate();
	useEffect(() => {}, []);

	const columns: any = [
		{ title: '编号', dataIndex: 'id', width: 60 },
		{ title: '账号', dataIndex: 'account', width: 160 },
		{ title: 'ip', dataIndex: 'ip', width: 160 },
		{ title: '权限情况 [用户,牌型,牌组]', width: 100, colSpan: 3, dataIndex: 'accountLimit' },
		{ width: 100, colSpan: 0, dataIndex: 'cardArrayLimitCount' },
		{ width: 100, colSpan: 0, dataIndex: 'cardTypeLimitCount' },
		{ title: '到期时间', dataIndex: 'useEndTime', width: 160, render: (v: string) => dateFormat(v) },
		{
			title: '状态',
			dataIndex: 'isBan',
			width: 100,
			fixed: 'right',
			render: (v: boolean) => <Tag color={['#87d068', '#f50'][Number(v)]}>{v ? '禁用' : '启用'}</Tag>,
		},
		{
			title: '操作',
			width: 205,
			fixed: 'right',
			render: (state: any) => (
				<div>
					<Button
						onClick={async () => {
							const newpass: any = await resetPassword({ id: state.id });
							notification.open({
								message: '密码重置成功',
								description: (
									<div>
										新密码为：<Tag>{newpass}</Tag>
									</div>
								),
								duration: 0,
							});
						}}>
						重置密码
					</Button>
					<Button
						onClick={() => {
							navigate('../authdeal', { state });
						}}
						className=' ml-2'>
						编辑权限
					</Button>
				</div>
			),
		},
	];
	return (
		<>
			<div className=' flex items-center mb-4 h-12'>
				<p className=' ml-4'>类型：</p>
				<Select
					style={{ width: 260 }}
					showSearch
					value={filterInfo.groupId}
					allowClear={filterInfo.groupId}
					placeholder='用户类型'
					defaultActiveFirstOption={false}
					options={[
						{ value: 0, label: '全部' },
						{ value: -1, label: '冻结' },
						{ value: 1, label: '正常' },
					]}
					onChange={(accountState) => {
						setFilterInfo({ ...filterInfo, accountState });
					}}
				/>
				<Button
					className=' ml-auto mr-1'
					onClick={() => {
						navigate('../authdeal');
					}}>
					新增用户
				</Button>
			</div>
			<Table
				bordered
				dataSource={viewInfo.list || []}
				columns={columns}
				scroll={{ y: 'calc(100vh - 16rem)' }}
				rowKey={({ id }) => `row-${id}`}
				pagination={{
					total: viewInfo.total,
					showTotal: (total) => `共 ${total} 项`,
					showSizeChanger: false,
					position: ['bottomLeft'],
					current: page,
					defaultPageSize: 15,
					onChange: (e) => setPageIndex(e),
				}}
			/>
		</>
	);
}
